<!-- 考勤统计 -->
<template>
  <vxe-grid
    ref="xTable"
    border
    resizable
    keep-source
    height="400"
    :loading="loading"
    :toolbar-config="tableToolbar"
    :edit-rules="validRules"
    :columns="tableColumn"
    :data="tableData"
    @checkbox-change="({records}) =>  this.selectedRow = records"
    @checkbox-all="({records}) =>  this.selectedRow = records"
    :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
  >
    <template #salaryItemCode="{ row }">
      <a-select
        show-search
        v-model="row.salaryItemCode"
        :default-active-first-option="false"
        :show-arrow="false"
        :filter-option="false"
        :not-found-content="null"
        @search="handleSearch"
        @change="handleChange($event,row)"
      >
        <template v-for="item in salaryItems">
          <a-select-option  :key="item.itemCode">
            {{ item.itemName }}
          </a-select-option>
        </template>
      </a-select>
    </template>
    <template #salaryItemCodeText="{ row }">
      <span>{{row.salaryItem && row.salaryItem.itemName}}</span>
    </template>
    <template v-slot:toolbar_buttons>
      <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
      <a-dropdown v-if="selectedRow.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button>批量操作<a-icon type="down" /></a-button>
      </a-dropdown>
    </template>
  </vxe-grid>
</template>
<script >
import { getAction } from '@/api/manage'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'SalaryTemplateItemTable',
  components: {
    JSelectUserByDep
  },
  props: {
    templateCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      tableToolbar: {
        print: true,
        zoom: true,
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'salaryItemCode', title: '薪资项目', editRender: {}, slots: { edit: 'salaryItemCode', default: 'salaryItemCodeText' }},
        { field: 'calculationType', title: '核算方式', slots: { default: ({ row }) => {
          return row.salaryItem && filterDictTextByCache('hr_account_cycle', row.salaryItem.accountCycle)
        } }},
        { field: 'lowerLimit', title: '金额下限', editRender: { name: '$input', props: { type: 'number' }}},
        { field: 'upperLimit', title: '金额上限', editRender: { name: '$input', props: { type: 'number' }}},
        { field: 'remark', title: '备注', editRender: { name: '$input' }}
      ],
      validRules: {
        upperLimit: [
          { required: true, message: '请填写金额上限' },
          { min: 0, type: 'number', message: '请填写大于0的数字' }
        ],
        lowerLimit: [
          { required: true, message: '请填写金额下限' },
          { validator: this.lowerLimit },
          { min: 0, type: 'number', message: '请填写大于0的数字' }
        ]
      },
      selectedRow: [],
      tableData: [],
      salaryItems: [],
      url: {
        list: '/hr/salary/template/listSalaryTemplateDetailByTemplateCode',
        salaryItem: '/hr/salary/item/list'
      }
    }
  },
  mounted() {
    this.loadData()
    this.getSalaryItem()
  },
  methods: {
    loadData() {
      // 加载数据 若传入参数1则加载第一页的内容
      if (!this.templateCode) {
        this.tableData = []
        return false
      }
      this.loading = true
      getAction(this.url.list, { templateCode: this.templateCode }).then(res => {
        if (res.success) {
          this.tableData = res.result.records
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    lowerLimit({ cellValue, row }) {
      if (cellValue && row.upperLimit && Number(cellValue) >= Number(row.upperLimit)) {
        return new Error('金额下限必须小于金额上限')
      }
    },
    handleEdit(data) {
      this.$refs.salaryUserModal.edit()
    },
    handleAdd(data) {
      this.$refs.xTable.insert({ templateCode: this.templateCode })
    },
    batchDel() {
      this.$refs.xTable.removeCheckboxRow()
    },
    validate() {
      return this.$refs.xTable.validate()
    },
    getTableData() {
      return this.$refs.xTable.getTableData()
    },
    handleSearch(value) {
      this.getSalaryItem(value)
    },
    handleChange(value, row) {
      const option = this.salaryItems.filter(item => {
        if (value === item.itemCode) {
          return item
        }
      })
      row.salaryItem = {
        itemCode: option[0].value,
        itemName: option[0].itemName
      }
      this.getSalaryItem(option[0].itemName)
    },
    getSalaryItem(itemName) {
      getAction(this.url.salaryItem, {
        pageNo: 1,
        pageSize: 20,
        itemName: itemName
      }).then(res => {
        if (res.success) {
          this.salaryItems = res.result.records
        }
      })
    }
  }
}
</script>
